﻿<h2>Shoutbox</h2>
@using Anurgath.Shoutbox;
@{
    Script.Require("jQuery_SignalR_Hubs").AtHead();
    Script.Include("proligence-signalr-common.js").AtFoot();

    Script.Include("knockout-2.3.0.js").AtHead();
    Script.Include("knockout-2.3.0.debug.js").AtHead();

    Style.Include("shoutbox.css").AtHead();
}

@using (Script.Foot())
{ 
    <script type="text/javascript">        
        function ShoutboxViewModel() {
            // Variables
            this.Status = ko.observable();
            this.ShoutboxId = "@Model.ShoutboxId";
            this.ReceivedPosts = ko.observableArray();
            this.PostContent = ko.observable();
            this.ShoutboxHub = $.connection.shoutboxHub;

            // Properties
            var self = this;

            // Bind functions
            this.ReceivedPostsAfterAdd = function (element, index, data)
            {
                if (element.nodeType === 1) {
                    
                }
            };

            this.SendPostClick = function ()
            {
                this.ShoutboxHub.server.sendPublishPost(this.ShoutboxId, this.PostContent());
            };

            this.ScrollToDown = function ()
            {
                $('#PostsList').scrollTop($('#PostsList')[0].scrollHeight);
            }

            // SignalR
            this.ShoutboxHub.client.receivePong = function ()
            {
                self.Status("Received pong from server");
            }

            this.ShoutboxHub.client.receiveGetAllPosts = function (postsList)
            {
                self.Status("Received all posts from server");

                for (var i = 0; i < postsList.length; i++) {                    
                    self.ReceivedPosts.push(postsList[i]);
                }

                self.ScrollToDown();
            }

            this.ShoutboxHub.client.receiveGetSinglePost = function (post)
            {
                self.Status("New post");
                self.ReceivedPosts.push(post);
                self.ScrollToDown();
            }

            $.connection.hub.start().done(function ()
            {
                self.ShoutboxHub.server.sendPing();
                self.ShoutboxHub.server.sendGetAllPostsForShoutboxId(self.ShoutboxId);
            });
        }

        var ViewModel = new ShoutboxViewModel();
        ko.applyBindings(ViewModel);
    </script>
}


<div>
    <p data-bind="text: Status">If you see this message, something is wrong</p>
</div>

<div id="Shoutbox">
    <div id="PostsList" data-bind="foreach: { data: ReceivedPosts, afterAdd: ReceivedPostsAfterAdd }">
        <div data-bind="text: UserName"></div>
        <div data-bind="text: AddDate"></div>
        <div data-bind="text: Content"></div>
    </div>

    <div id="PostsCreate">

        @if (WorkContext.CurrentUser != null)
        { 
            <fieldset>
                <legend>Send</legend>
                <input id="PostContent" data-bind="value: PostContent" type="text" />
                <button id="SendPost" data-bind="click: SendPostClick">Send</button>
            </fieldset>
        }
        else
        { 
            <p>@(T(TextConsants.ConstLoginToPublishPosts))</p>
        }
    </div>

    <div class="clear"></div>
</div>
